<template>
  <view class="goods-item" :class="{ mt10: itemIndex > 1 }" @click="handleNavToDetail(goodInfo.productId, goodInfo.shopId)">
    <view class="goods-item__image">
      <image :src="cropImg(goodInfo.pic, 380, 380)" alt :lazy-load="true" mode="aspectFill" style="height: 100%"></image>
    </view>
    <good-item-foot :form-data="formData" :goods-info="goodInfo" />
  </view>
</template>

<script lang="ts" setup>
import { cropImg } from '@/utils'
import type { PropType } from 'vue'
import { GoodFormData } from '../../types'
import { jumpGoods } from '@/utils/navigateToShopInfo'
import goodItemFoot from './good-item-foot.vue'
import { GoodItemType } from '../good'

defineProps({
  goodInfo: {
    type: Object as PropType<GoodItemType>,
    default: () => {},
  },
  formData: {
    type: Object as PropType<GoodFormData>,
    default: () => ({}),
  },
  itemIndex: {
    type: Number,
    default: 0,
  },
})

const handleNavToDetail = (id: string, shopId: Long, instruction?: number) => {
  let url = `/pluginPackage/goods/commodityInfo/InfoEntrance?goodId=${id}&shopId=${shopId}`
  if (instruction) {
    url += `&instruction=${instruction}`
    uni.navigateTo({
      url,
    })
  } else {
    jumpGoods(shopId, id)
  }
}
</script>

<style lang="scss" scoped>
.goods-item {
  width: 348rpx;
  border-radius: 16rpx;
  overflow: hidden;
  &__image {
    height: 330rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  &__foot {
    padding: 20rpx 12rpx;
  }
}
.mt10 {
  margin-top: 20rpx;
}
</style>
